<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>randombox multiple</title>
<link rel="stylesheet" href="assets/reset.css">
<link rel="stylesheet" href="assets/multiple.css">
<style type="text/css">
body{font-family: Microsoft Yahei;}
.container{width:800px;margin: 100px auto;}
.container h1,.container h6{color:#005288;font-weight: normal;}
</style>
</head>
<body>
<div class="container">
<h1>Multiple</h1>
<h6>配合Overlay使用</h6>
<div id="J_Luckybox">
	<div id="J_luckyItemShadow"></div>
	<div class="lucky-shadow"></div>
	<div class="lucky-row clearfix">
		<img id="b1" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="http://www.baidu.com">
		<img id="b2" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b3" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b4" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b5" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b6" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b7" src="assets/lemon.jpg" class="lucky-item last-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
	</div>
	<div class="lucky-row clearfix double-h">
		<div class="J_sider clearfix">
			<img id="b18" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
			<img id="b17" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		</div>
		<div class="J_center double-h">
			<a href="javascript:void(0);" id="J_btnStart" class="btn-down" title="点击开始">Start</a>
		</div>
		<div class="J_sider clearfix">
			<img id="b8" src="assets/lemon.jpg" class="lucky-item last-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
			<img id="b9" src="assets/lemon.jpg" class="lucky-item last-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		</div>
	</div>
	<div class="lucky-row clearfix">
		<img id="b16" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b15" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b14" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b13" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b12" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b11" src="assets/lemon.jpg" class="lucky-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
		<img id="b10" src="assets/lemon.jpg" class="lucky-item last-item" title="柠檬" info="柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……" href="test">
	</div>
</div>
<div id="overlay" class="clearfix">
	<img alt="图片">
	<div class="J_Info">
		<h3>柠檬</h3>
		<p>柠檬切片泡水，加入冰块、少许糖，那淡淡的酸甜，幽幽的清香令人心神清爽。做菜时加入一些柠檬汁，夏天更开胃……111111111111111111111111111111111111111111111111111111111111111111111</p>
	</div>
	<a href="#" id="btn_goto" target="_blank">去瞅瞅</a>
</div>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
<script type="text/javascript">
(function(S){
	S.ready(function(S){
			var $ = S.all,
			E = S.Event,
			box,
			J_Luckybox = $("#J_Luckybox"),
			J_luckyItem = $("img.lucky-item",J_Luckybox),
			J_btnStart = $("#J_btnStart"),
			J_luckyItemShadow = $("#J_luckyItemShadow");
		//遮罩层
		function Shadow(obj,parent){
			this.init = function(){
				var offset = J_Luckybox.offset();
				obj.css({left:offset.left,top:offset.top,width:parent.outerWidth(),height:parent.outerHeight()}).show();
			}
			this.show = function (){
				obj.css({"z-index":"50"});
			};
			this.hide = function(){
				obj.css({"z-index":"-10"});
			}
		}
		var shadow = new Shadow($(".lucky-shadow"),J_Luckybox);
		
		//初始化遮罩
		shadow.init();
		//start 按钮
		setInterval(toggle, 300);
		
		function toggle(){
			J_btnStart.hasClass("btn-down") ? J_btnStart.removeClass("btn-down") && J_btnStart.addClass("btn-up") : J_btnStart.removeClass("btn-up") && J_btnStart.addClass("btn-down");
		}
		S.use("gallery/randombox/1.0/index,overlay",function(S,RandomBox,O){
				 var popup = new O.Popup({
			        elStyle : {
			            border : "4px solid #000",
			            background:"#eaeded"
			        },
			        width : 358,  //配置高和宽
			        height : 194,
			        srcNode:"#overlay",
			        closable:true,
			        mask:true,
			        align:{
			            node: $("#J_Luckybox"),       
			            points: ['tl','tl'], 
			            offset: [175, 100]   
			        }
			    });
					 
				box = new RandomBox({
				//配置id数组   "#"号勿忘
				list:["#b1","#b2","#b3","#b4","#b5","#b6",
					"#b7","#b8","#b9","#b10","#b11","#b12",
					"#b13","#b14","#b15","#b16","#b17","#b18"],
				//配置旋转圈数
				rollTimes:2,
				//配置CSS类名  （选中时效果）
				cls:"sel-item",	
				//配置动画速度 (ms)
				duration:30
			},function(targetId){
				//执行选中后的回调函数
				var $tgt = $(targetId);
				var imgSrc = $tgt.attr("src");
				var imgHref = $tgt.attr("href");
				var $overlay = $("#overlay"),
					$overlayImg = $("img",$overlay);
				var btnGoto = $("#btn_goto");
				//中奖遮罩效果
				showItemShadow($tgt);
				
				$overlayImg.attr("src",imgSrc);
				//注销事件
				E.detach($overlayImg,"click");
				//注册事件
				E.on($overlayImg,"click",function(){window.open(imgHref);});
				btnGoto.attr("href",imgHref);
				$(".J_Info",$overlay).html("<h3>"+$tgt.attr("title")+"</h3>"+"<p>"+$tgt.attr("info")+"</p>");
				
				
				
				
				//延时
				setTimeout(function(){
					popup.show();
					shadow.hide();
					box.reset();
					//避免再次摇奖
					E.fire(J_btnStart,"blur");
					bindEvt();
				}, 500)
				
			});
				bindEvt();
				//绑定图片遮罩层事件
				function bindEvt(){
					E.on(J_luckyItem,"mouseenter",function(e){
						var target = $(e.target);
						showItemShadow(target);
					});
					//popup 关闭时触发shadow隐藏
					E.on($(".ks-ext-close-x"),"click",function(){
						J_luckyItemShadow.hide();
					});
				}

				//方块遮罩hover
				function showItemShadow(target){
					var href = target.attr("href")||"",
						title = target.attr("title")||"",
						offset = target.offset();
					
					J_luckyItemShadow.html("<span href="+href+">"+title+"</span>")
					 .css({left:offset.left,top:offset.top})
					 .show();
				}
				//解绑
				function unbindEvt(){
					E.detach(J_luckyItem,"mouseenter");
					E.detach($(".ks-ext-close-x"),"click");
				}

				E.on(J_luckyItemShadow,"mouseleave click",function(e){
					e.type == "mouseleave" ? J_luckyItemShadow.hide() : window.open($("span",J_luckyItemShadow).attr("href"));	
				});
				//摇奖
				E.on(J_btnStart,'click',function(){
					shadow.show();
					box.start();
					unbindEvt();
				});
		});
	});
})(KISSY);
</script>
</div>
</body>
</html>